<template>
	<view class="case-library-container">
		<!-- 顶部栏 -->
		<view class="header">
			<text class="header-title">案例库</text>
		</view>
		<view class="main-content">
			<!-- 左侧分组导航 -->
			<view class="sidebar">
				<!-- 一级导航 -->
				<block v-for="(level1, idx) in navigationData" :key="level1.id">
					<view
						:class="['sidebar-item', { active: idx === activeLevel1 && activeLevel1 !== -1 }]"
						@click="toggleLevel1(idx)"
						>
						{{ level1.name }}
						<uni-icons 
						  class="arrow" 
						  type="right" 
						  :class="{ 'arrow-expanded': level1.expanded }"></uni-icons>  
					</view>
				  
					<!-- 二级导航，当一级导航展开时显示 -->
					<block v-if="level1.expanded">
						<view v-for="(level2, level2Idx) in level1.children" :key="level2.id">
							<view 
								:class="['sidebar-item-l2', { 'active': activeLevel2 === level2Idx && activeLevel1 === idx && activeLevel2 !== -1 }]"
								@click="toggleLevel2(idx, level2Idx)">
								{{ level2.name }}
								<uni-icons 
									class="arrow" 
									type="right" 
									:class="{ 'arrow-expanded': level2.expanded }"></uni-icons>	
							</view>

							<!-- 三级导航，当二级导航展开时显示 -->
							<block v-if="level2.expanded">
								<view 
									v-for="(level3, level3Idx) in level2.children" 
									:key="level3.id"
									:class="['sidebar-item-l3', { 'active': activeLevel3 === level3Idx && activeLevel2 === level2Idx && activeLevel1 === idx && activeLevel3 !== -1 }]"
									@click="selectLevel3(idx, level2Idx, level3Idx)">
									{{ level3.name }}
								</view>
							</block>
						</view>
					</block>
				</block>
			</view>
			<!-- 右侧案例列表 -->
			<view class="case-list">
				<view v-if="currentCases.length === 0" class="empty-state">
					请选择左侧分类查看案例
				</view>
				<view
					v-else
					v-for="(item, idx) in currentCases"
					:key="item.id"
					class="case-card">
					<image class="avatar" :src="item.avatar" mode="aspectFill" />
					<view class="case-info">
						<view class="case-title">{{ item.title }}</view>
						<view class="case-meta">
							<text>赵柏舟 {{ item.age }}岁</text>
							<text>住院号：{{ item.hospitalId }}</text>
						</view>
					</view>
					<button class="enter-btn" @click="enterCase(item)">进入诊疗</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { resetCountdown } from '@/components/timeModule/countdown.js'
import { onShow } from '@dcloudio/uni-app'

// 在需要的地方手动重置倒计时
const handleManualReset = () => {
  resetCountdown()
  // console.log(333);
}

// 三级导航数据
const navigationData = ref([
  { 
    id: 1, 
    name: '呼吸困难', 
    expanded: false,
    children: [
      { 
        id: 11, 
        name: '案例', 
        expanded: false,
        children: [
          { id: 111, name: '初级' },
          // { id: 112, name: '案例' }
        ]
      },
      { 
        id: 12, 
        name: '案例', 
        expanded: false,
        children: [
          { id: 121, name: '初级' },
          { id: 122, name: '高级' }
        ]
      }
    ]
  },
])

// 当前激活的导航层级 - 初始化为 -1 表示未选中任何项
const activeLevel1 = ref(-1)
const activeLevel2 = ref(-1)
const activeLevel3 = ref(-1)

// 所有案例数据，通过三级导航索引来访问
const allCases = ref({
  // 本科生 > 系统解剖学 > 头颈部
  '0-0-0': [
    {
      id: 1,
      title: '颈部疼痛案例',
      avatar: '/static/avatar.png',
      age: 45,
      hospitalId: 'T000056'
    },
    {
      id: 2,
      title: '头部外伤',
      avatar: '/static/avatar.png',
      age: 32,
      hospitalId: 'T187342'
    }
  ],
  // 本科生 > 系统解剖学 > 躯干
  '0-0-1': [
    {
      id: 3,
      title: '胸腔积液',
      avatar: '/static/avatar.png',
      age: 56,
      hospitalId: 'T156074'
    }
  ],

})

// 计算当前显示的案例
const currentCases = computed(() => {
  // 如果没有选中任何项，返回空数组
  if (activeLevel1.value === -1 || activeLevel2.value === -1 || activeLevel3.value === -1) {
    return []
  }
  
  const caseKey = `${activeLevel1.value}-${activeLevel2.value}-${activeLevel3.value}`
  return allCases.value[caseKey] || []
})

// 切换一级导航
function toggleLevel1(idx) {
  // 切换展开/折叠状态
  navigationData.value[idx].expanded = !navigationData.value[idx].expanded
  
  // 如果是折叠操作，记录当前状态
  if (!navigationData.value[idx].expanded) {
    // 当折叠时，不改变选中状态，保留当前选中项
  } else {
    // 如果是展开操作，只设置一级导航激活状态，不自动选中二级和三级
    activeLevel1.value = idx
    // 注意：这里不再自动选中二级和三级导航
    // 这样当展开时，只有一级导航显示为选中状态
  }
}

// 切换二级导航
function toggleLevel2(level1Idx, level2Idx) {
  // 切换当前二级导航的展开状态
  const currentLevel2 = navigationData.value[level1Idx].children[level2Idx]
  currentLevel2.expanded = !currentLevel2.expanded
  
  // 如果是展开操作，则关闭同级的其他二级导航
  if (currentLevel2.expanded) {
    navigationData.value[level1Idx].children.forEach((child, idx) => {
      if (idx !== level2Idx) {
        child.expanded = false
      }
    })
  }
  
  // 更新激活状态
  activeLevel1.value = level1Idx
  activeLevel2.value = level2Idx
  
  // 注意：不再自动选中第一个三级项
  // 让用户自己选择
  
  // // 阻止事件冒泡
  // event.stopPropagation()
}

// 选择三级导航
function selectLevel3(level1Idx, level2Idx, level3Idx) {
  // 更新激活状态
  activeLevel1.value = level1Idx
  activeLevel2.value = level2Idx
  activeLevel3.value = level3Idx
  
  // // 阻止事件冒泡，防止触发父级的点击事件
  // event.stopPropagation()
  
  // 显示相应的案例列表
  const caseKey = `${level1Idx}-${level2Idx}-${level3Idx}`
  console.log('选择了案例分类:', caseKey)
}

function enterCase(item) {
  // 跳转到诊疗详情页
  uni.showToast({ title: `进入：${item.title}`, icon: 'none' })
  uni.navigateTo({
  	url:"/pages/nursesStation/nursesStation"
  })
}

onShow(() => {
  uni.setStorageSync('thermometerPosition', 'cabinet');
});

</script>

<style lang="scss" scoped>
/* 基础样式 */
.case-library-container {
	width: 100vw;
	height: 100vh;
	background: #f0f2f5;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
  
	.header {
		height: 45rpx;
		background: #4d8be8;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
    
		.header-title {
			flex: 1;
			text-align: center;
			color: #fff;
			font-size: 20rpx;
			margin-right: 20rpx;
		}
	}
  
	.main-content {
		flex: 1;
		display: flex;
		overflow: hidden;
		box-sizing: border-box;
		
		.sidebar {
			width: 180rpx;
			background: #f5f7fa;
			border-right: 1rpx solid #e0e0e0;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			overflow-y: auto;
      
			.sidebar-item {
				padding: 15rpx 0;
				text-align: center;
				color: #333;
				font-size: 20rpx;
				cursor: pointer;
				border-left: 4rpx solid transparent;
				transition: background 0.2s, border-color 0.2s;
				box-sizing: border-box;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				
					&.active {
						background: #e6f0ff;
						color: #3477f5;
						border-left: 4rpx solid #3477f5;
						// font-weight: 15;
					}
				
					.arrow {
						position: absolute;
						right: 10rpx;
						font-size: 16rpx;
						color: #999;
						transition: transform 0.3s;
					  
						&-expanded {
							transform: rotate(90deg);
						}
					}
			}
		  
			/* 二级导航样式 */
			.sidebar-item-l2 {
				padding: 15rpx 0;
				text-align: center;
				color: #555;
				font-size: 16rpx;
				cursor: pointer;
				position: relative;
				background: #edf3fa;
				border-left: 3rpx solid transparent;
				transition: background 0.2s, color 0.2s;
				display: flex;
				align-items: center;
				justify-content: center;

				&.active {
					color: #3477f5;
					background: #dfeafc;
					border-left: 3rpx solid #3477f5;
				}
				.arrow {
					position: absolute;
					right: 10rpx;
					font-size: 16rpx;
					color: #999;
					transition: transform 0.3s;
				  
					&-expanded {
						transform: rotate(90deg);
					}
				}
			}

			/* 三级导航样式 */
			.sidebar-item-l3 {
				padding: 12rpx 0 12rpx 20rpx; /* 左侧增加内边距，形成缩进效果 */
				text-align: left; /* 左对齐 */
				color: #666;
				font-size: 16rpx;
				cursor: pointer;
				position: relative;
				background: #e3edf9;
				border-left: 2rpx solid transparent;
				transition: background 0.2s, color 0.2s;
				display: flex;
				align-items: center;
				justify-content: center; /* 左对齐 */

				&.active {
					color: #3477f5;
					background: #d8e6fa;
					border-left: 2rpx solid #3477f5;
				}
				
				&::before {
					content: '•'; /* 添加圆点标记 */
					margin-right: 5rpx;
					font-size: 16rpx;
				}
			}
		}
		
		.case-list {
			flex: 1;
			padding: 16rpx;
			display: flex;
			flex-direction: column;
			gap: 16rpx;
			box-sizing: border-box;
			overflow-y: auto;
		  
			// 添加空状态样式
			.empty-state {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 200rpx;
				color: #999;
				font-size: 20rpx;
				background: #f9f9f9;
				border-radius: 12rpx;
				margin-top: 40rpx;
			}
		  
			.case-card {
				background: #fff;
				border-radius: 12rpx;
				box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.05);
				display: flex;
				align-items: center;
				padding: 16rpx;
				box-sizing: border-box;
			
				.avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 16rpx;
					background: #f0f0f0;
					flex-shrink: 0;
				}
			
				.case-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					gap: 6rpx;
					min-width: 0;

					.case-title {
						font-size: 20rpx;
						font-weight: bold;
						color: #222;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.case-meta {
						font-size: 18rpx;
						color: #666;
						display: flex;
						flex-direction: column;
						gap: 2rpx;
					}
				}
			
				.enter-btn {
					background: #3477f5;
					color: #fff;
					font-size: 20rpx;
					border-radius: 8rpx;
					padding: 0 16rpx;
					height: 50rpx;
					line-height: 50rpx;
					margin-left: 16rpx;
					flex-shrink: 0;
				}
			}
		}
	}
}

</style>    